思源 Chart 萌新使用指南
基础教程
但由于该教程中的“百度图说”已经下线了，可以使用 https://www.lddgo.net/base/class?classID=6 这个网站代替。
进阶教程
如果 https://www.lddgo.net/base/class?classID=6 这个网站的图例无法满足你的需求，也可以参考官网示例。
官网中，复制js示例代码中的option里的内容即可，可根据自己的实际情况修改数据，如图。
如果，有些复杂的示例中有js代码的，可以在最底部添加console.log(option)，然后打开浏览器开发者工具，然后打开控制台（windows: Ctrl+Shift+I；macOS: Cmd+Option+I），复制刚才打印的option对象，然后粘贴到思源chart块中即可。
当然，这种方法还是太过麻烦，还有一种更方便的方法，可以在chart块中先写个立即函数，然后返回option变量，然后把echarts官网的代码直接粘贴到立即函数中即可。
这样，还有个好处，还可以通过思源api动态生成option的数据。可参考：https://ld246.com/article/1681651522673
立即函数如下：
(() => {
//代码粘贴到这里
return option;
})()
这里还有一些其他的示例可供参考：https://juejin.cn/post/7078834647005822983
当然，如果想个性化和支持更多功能，还推荐认真看看官方的教程：https://echarts.apache.org/handbook/zh/how-to/chart-types/bar/basic-bar
源码分析
基本上，以上掌握了就能很好的利用echarts了。
但你可能遇到一些问题，不知道怎么排查，或者你想看看官方的源码是怎么实现的。
可打开思源控制台（windows: Ctrl+Shift+I；macOS: Cmd+Option+I），然后打开源代码选项卡，然后找到main.js文件，然后搜索echarts.init，一共出现2个，找到第2个即可，如图。
由图可知，chart块里输入的数据来自l变量，而l变量的值来自块元素的data-content属性。
如果有问题，也可以在这里加断点调试。